import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import VueSetupExtend from "vite-plugin-vue-setup-extend";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  //加载的哪个环境；
  //process.cwd()为根目录
  // let env = loadEnv(mode, process.cwd());

  //插件
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    // 扩展setup插件，支持在script标签中使用name属性
    VueSetupExtend(),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(process.cwd(), "src/assets/icons")],
      // 指定symbolId格式
      symbolId: "icon-[dir]-[name]",
      svgoOptions: true,
    }),
  ],
  css: {
    //预处理选项
    preprocessorOptions: {
      scss: {
        //附加的数据,全局变量
        additionalData: '@import "./src/assets/styles/variable.scss";',
      },
    },
  },
  //解析
  resolve: {
    //后缀名
    extensions: [".js", ".json", ".ts", ".vue"],
    //路径别名，方便路径引入
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
  // 服务器配置
  server: {
    proxy: {
      // 在此处为需要解决跨域的 API 配置代理
      "/api": {
        target: "http://loacalhost:3000",
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ""), // 去掉 /api 前缀
      },
    },
  },
});
